<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>data与el的两种写法.</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>hello,{{msg}}</h2>
        <h2>地址是: {{address}}</h2>
    </div>

    <script>
        //el第一种写法 常用
        /* new Vue({
            el: '#root',
            data: {
                msg: '银河日语学习',
                address: '宏福科技园综合楼'
            }
        }) */
        //el的第二种写法

        // const vm = new Vue({
        //     data: {
        //         msg: '银河日语学习',
        //         address: '宏福科技园综合楼'
        //     }
        // })
        // vm.$mount('#root')

        // console.log(vm);

        //data的第一种写法 data是一个对象
        /* new Vue({
            el: '#root',
            data: {
                msg: '日语学习',
                address: '宏福科技园综合楼'
            }
        }) */
        
        //data的第二种写法 data是一个函数,且要返回数据对象(组件中必须要用函数式data)
        /* new Vue({
            el: '#root',
            data: function () {
                return {
                    msg: '日语学习',
                    address: '宏福科技园综合楼' 
                }
            }
        }) */
        //data的第二种写法
        new Vue({
            el: '#root',
            data () {
                return {
                    msg: '日语学习',
                    address: '宏福科技园综合楼' 
                }
            }
        })

        
    </script>
</body>
</html>